<script setup>
import { computed, onMounted, ref } from "vue";
// 报表
import { queryClazzCountApi, queryEducationCountApi } from "@/api/report";
import { ElMessage } from "element-plus";

// 班级人数统计数据的配置
const optionCountData = computed(() => {
  return {
    xAxis: {
      type: "category",
      data: clazzListX.value,
    },
    yAxis: {
      type: "value",
      min: 0,
      interval: 1,
    },
    series: [
      {
        data: clazzListY.value,
        type: "bar",
        itemStyle: {
          color: "#3398DB",
        },
      },
    ],
  };
});

// 学员学历统计数据的配置
const optionDegreeData = computed(() => {
  return {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        degree: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: educationList.value, // 使用从后端获取的数据
      },
    ],
  };
});

// 获取班级人数统计数据
const queryClazzCountData = async () => {
  try {
    const res = await queryClazzCountApi();
    if (res.code === 200) {
      clazzListX.value = res.data.clazzList;
      clazzListY.value = res.data.dataList;
    } else {
      ElMessage.error("获取班级人数统计数据失败：" + res.msg);
    }
  } catch (error) {
    ElMessage.error("获取班级人数统计数据时发生错误：" + error.message);
  }
};

// 获取学员学历统计数据
const queryEducationCountData = async () => {
  try {
    const res = await queryEducationCountApi();
    if (res.code === 200) {
      educationList.value = res.data;
      //转化格式把degree改为name
      educationList.value = educationList.value.map((item) => {
        return {
          name: item.degree,
          value: item.value,
        };
      });
    } else {
      ElMessage.error("获取学院学历统计数据失败：" + res.msg);
    }
  } catch (error) {
    ElMessage.error("获取学院学历统计数据时发生错误：" + error.message);
  }
};

// 定义变量
const clazzListX = ref([]);
const clazzListY = ref([]);
const educationList = ref([]);

onMounted(() => {
  // 同时调用两个数据请求函数
  Promise.all([queryClazzCountData(), queryEducationCountData()])
    .then(() => {
      console.log("数据获取完成");
    })
    .catch((error) => {
      ElMessage.error("数据获取时发生错误：" + error.message);
    });
});
</script>

<template>
  <div class="container">
    <div class="class-count">
      <h3>班级人数统计</h3>
      <e-charts
        id="studentCountDataId"
        class="studentCountData"
        :option="optionCountData"
      />
    </div>
    <!-- // 垂直虚线 -->
    <div class="vertical-line"></div>
    <div class="education-stat">
      <h3>学员学历统计</h3>
      <e-charts class="studentDegreeData" :option="optionDegreeData" />
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  height: 100%;
  overflow: hidden;
}
.class-count,
.education-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-size: 24px;
}
h3 {
  margin-bottom: 10px;
}
.vertical-line {
  width: 1px;
  height: 100%;
  background-color: #ccc;
}
.studentCountData,
.studentDegreeData {
  height: 400px;
}
</style>
